/**
 * Created by charlie on 17-12-27.
 */
import React from 'react'
import {StyleSheet,View,Text,Image,ScrollView,TouchableOpacity,Modal} from 'react-native'
import Loading from '../../components/loading/loading'


export default class index extends React.Component{
    render(){
        const {data} = this.props.taiZhangDetail;
        let prjname = this.props.taiZhangDetail.prjname;
        let corpName = this.props.taiZhangDetail.corpName;
        let img = this.props.taiZhangDetail.img;
        let createDate = this.props.taiZhangDetail.createDate;
        let loading = this.props.taiZhangDetail.loading;
        let imgUrl = this.props.taiZhangDetail.imgUrl;
        let thisOpen = this.props.taiZhangDetail.thisOpen;
        const {changeFormProblems,changeFormJdzSigns,changeFormCorpSigns} = data;
        const {thisPhotoClose,thisPhotoOpen} = this.props;

        return(
            <View>
                {
                    loading?<Loading />:
                        <ScrollView>
                            <View style={styles.thisMainView}>
                                <View style={{flexDirection:'row',justifyContent:'flex-start',}}>
                                    <Text style={styles.thisTextName}>
                                        整改企业:
                                    </Text>
                                    <Text style={styles.thisText}>
                                        {corpName}
                                    </Text>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.thisTextName}>
                                        项目名称:
                                    </Text>
                                    <Text style={styles.thisText}>
                                        {prjname}
                                    </Text>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.thisTextName}>
                                        检查日期:
                                    </Text>
                                    <Text style={styles.thisText}>
                                        {createDate}
                                    </Text>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.thisTextName}>
                                        检查人员:
                                    </Text>
                                    <Text style={styles.thisText}>
                                        {data.supervisor}
                                    </Text>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.thisTextName}>
                                        检查部位:
                                    </Text>
                                    <Text style={styles.thisText}>
                                        {data.inspectPosition}
                                    </Text>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.thisTextName}>
                                        检查要求:
                                    </Text>
                                    <Text style={styles.thisText}>
                                        {data.changeRequirement}
                                    </Text>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.thisTextName}>
                                        发现问题:
                                    </Text>
                                    <Text style={styles.thisText}>
                                        {data.problem}
                                    </Text>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.thisTextName}>
                                        图片展示:
                                    </Text>
                                  <View style={{display: 'flex',flexDirection:'row',flexWrap: 'wrap',marginLeft:10}}>
                                    {img.map(i => (
                                      <TouchableOpacity style={styles.imageSize} onPress={() =>{thisPhotoOpen(i.img)}}>
                                        <Image style={{width:300,height:200,}}  source={{uri:i.img}} />
                                      </TouchableOpacity>
                                    ))}
                                  </View>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.thisTextName}>
                                        企业签名:
                                    </Text>
                                  <View style={{display: 'flex',flexDirection:'row',flexWrap: 'wrap',marginLeft:10}}>
                                    {changeFormCorpSigns.map(i => (
                                        <TouchableOpacity style={styles.imageSize} onPress={() =>{thisPhotoOpen(i.url)}}>
                                            <Image style={{width:'100%',height:200,}}  source={{uri:i.url}} />
                                        </TouchableOpacity>
                                    ))}
                                  </View>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.thisTextName}>
                                        监督站签名:
                                    </Text>
                                  <View style={{display: 'flex',flexDirection:'row',flexWrap: 'wrap',marginLeft:10}}>
                                    {changeFormJdzSigns.map(i => (
                                      <TouchableOpacity style={styles.imageSize} onPress={() =>{thisPhotoOpen(i.url)}}>
                                        <Image style={{width:300,height:200,}}  source={{uri:i.url}} />
                                      </TouchableOpacity>
                                    ))}
                                  </View>

                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.thisTextName}>
                                        问题汇总:
                                    </Text>
                                    <View>
                                        {changeFormProblems.map((i,index)=> (
                                            <Text style={styles.thisText}>
                                                {Number(index)+1+'、'+ i.problem}
                                            </Text>
                                        ))}
                                    </View>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.thisTextName}>
                                        问题级别:
                                    </Text>
                                    <Text style={styles.thisText}>
                                        {data.seriousGrade}
                                    </Text>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.thisTextName}>
                                        处理结果:
                                    </Text>
                                    <Text style={styles.thisText}>
                                        {data.handleResult}
                                    </Text>
                                </View>
                            </View>
                        </ScrollView>
                }
                <View>
                    <Modal
                        animationType='fade'
                        onRequestClose={()=> this.onRequestClose()}
                        visible={thisOpen}
                    >
                    <View style={{ flex: 1,margin:20,borderRadius:6}}>
                        <TouchableOpacity onPress={ () =>{thisPhotoClose()}}>
                            <Image source={{uri:imgUrl}} style={{width:'100%',height:'100%',borderRadius:6}} />
                            <View style={styles.container}>
                                <Text style={{color:'white'}}>X</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    </Modal>
                </View>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    thisMainView:{
        flex:1,
        paddingRight:'20%',
        paddingLeft:'20%',
        justifyContent:'flex-start',
        flexDirection: 'column',
    },

    thisTextName:{
        color:'black',
        fontSize:15,
        paddingTop:10,
        paddingBottom:10
    },

    thisText:{
        paddingLeft:15,
        paddingTop:10,
        paddingBottom:10,
    },

    imageSize:{
      height:200,
      width:300,
      marginRight:10,
      marginTop:10
    },
    container: {
        position: 'absolute',
        top: 10,
        left: 10,
        justifyContent: 'flex-start',
        backgroundColor:'red',
        width:20,
        height:20,
        paddingLeft:6,
        borderRadius:10
    },
})